<template>
  <div
    id="container"
    :class="bg"
  >
    <component
      :ref="index"
      :is="item.type"
      v-for="(item,index) in items"
      :key="index"
    ></component>
  </div>
</template>

<script>
import VueRulerTool from "./vue-ruler-tool.vue";
import echart from "./show/echart.vue";
import scatter from "./show/scatter.vue";
import store from "@/vuex/store.js";
export default {
  name: "showPanel",
  data() {
    return {
      bg: "",
      items: [],
      allComponents: []
    };
  },
  components: {
    echart,
    scatter
  },
  // mounted() {
  //   this.items = JSON.parse(sessionStorage.getItem("echartData"));
  //   this.bg = sessionStorage.getItem("bg");
  //   this.$nextTick(()=>{
  //     this.items.forEach((item,index)=>{
  //          this.$refs[index][0].item = item.settings;
  //          console.log(index,this.$refs[index][0],item.settings)
  //       })
  //   })
  // },
  mounted() {
    this.items = JSON.parse(sessionStorage.getItem("echartData"));
    this.bg = sessionStorage.getItem("bg");
    var typeList = [];
    var styleList = [];
    new Promise((resolve, reject) => {
      this.items.forEach(item => {
        styleList.push({
          type: item.type,
          styleList: [item.settings]
        });
      });
      resolve();
    }).then(() => {
      styleList.forEach((item, index) => {
        this.$refs[index][0].items = item.styleList;
      });
    });
  },
  methods: {
    render: function(h) {
      return h(
        "div",
        this.allComponents.map(function(componentName) {
          return h(componentName);
        })
      );
    }
  }
};
</script>

<style scoped>
#container {
  width: 100vw;
  height: 100vh;
}
</style>